<template>
	<div>
		<van-nav-bar class="nav-bar" title="我的发布" left-arrow @click-left="$router.back('/login')" />
		
		<div class="content">
			
			
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			
			<van-list  v-model="loading" :finished="finished" finished-text="已经加载完毕~"  @load="get_article_list">
				<div class="article_list" v-for="(item,index) in list">
					<div class="list_item">
						<div class="title">{{ item.title }}</div>
			
						<div class="img_type1" v-if="item.imageSrc && item.imageSrc.length == 1">
							<video :src="img" v-for="img in item.imageSrc" v-if="img.endsWith('mp4')">
								<source src="myvideo.mp4" type="video/mp4">
								</source>
							</video>
							<div v-else>
							<img :src="img" v-for="img in item.imageSrc" />
							</div>
							</div>
						<div class="img_type2" v-if="item.imageSrc && item.imageSrc.length > 1"><img :src="img" v-for="img in item.imageSrc" /></div>
			
						<div class="aricle_bottom">
							<span>{{ item.author }}</span>
							<span>{{ item.comment }}评论</span>
							<span>{{ item.time|formatTime }}</span>
							<van-icon @click=del(item._id,index) style="margin-left: auto;" name="delete-o" />
						</div>
					</div>
				</div>
			</van-list>
			
			
			</van-pull-refresh>
			<van-empty v-if="list.length==0&&empty" description="描述文字" />
			
		
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				uid: [], //  分类的数据
				loading: true, //  是否正在加载中  是否在转圈   如果正在转圈 不会请求数据
				finished: false, //  数据是否加载完毕  如果加载完毕 也不再请求数据
				list: [], //  文章列表数据
				skip: 0,
				limit: 10,
				refreshing:false,//  是否正在刷新
				empty:false
			}
		},
		methods: {
			get_article_list(Refresh) {
				let uid =localStorage.getItem('uid')
				let {list,limit} = this;
				
				
				let skip = list.length; 
				
				if(Refresh){
					skip=0
				}
				
				this.$http
					.post('/api/get_user_article_list', {
						uid,
						skip, 
						limit 
					})
					.then(res => {
						console.log(res);
						//发布描述
						if(res.code==0){
							this.empty=true;
							// return
						}
						
					    if(res.code==0){
							if(Refresh){
								this.list = [];
								this.refreshing = false
							}
							
						 this.list.push(...res.data);
						 if (this.list.length >= res.count) {
							 
							this.finished = true;
							
						}else{
							this.loading=false;
						}
						
						} else {
							this.$toast(res.msg)
						}
					})
			},
		
			// 下拉刷新
			onRefresh(){
				this.finished = false;  
				this.get_article_list('Refresh');
				
				
			},
			//删除文章
			del(_id,index){
				let uid =localStorage.getItem('uid')
				
				this.$dialog.confirm({
						title: '提示',
						message: '您确定要删除此文章吗?',
					}).then(() => {
						
						return this.$http.post('/api/del_user_article',{
						    _id,
							uid,
							index
						}).then(res=>{
							console.log(res)
							
							if(res.code==0){
								
								this.$toast(res.msg)
								
								this.list.splice(index,1)
							}else{
								this.$toast(res.msg) 
								// console.log(res.msg)
							}
						})
					}).catch(res=>{
						
					})
				
				
				
				
			}
			
		}
	}
	
</script>

<style scoped="scoped">
	/deep/.van-icon-arrow-left:before {
		font-size: 150%;
		color: black;
	}
	/deep/.van-nav-bar__title{
		font-size: 120%;
	}
</style>
<style>
	.van-tabs__wrap--scrollable .van-tab {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	.home_header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		z-index: 999;
	}
	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 100px;
		background: #fff;
	}
	.van-list {
	}
	.article_list {
		padding: 0 20px;
		.list_item {
			width: 100%;
			padding: 12px 0 0 0;
			 overflow: hidden;
			white-space: pre-wrap;
			.title {
				margin: 0 0 10px 0;
			}
		}
		.img_type1 {
			width: 100%;
	
			img {
				width: 100%;
				height: 420px;
			}
		}
		.img_type2 {
			width: 100%;
			display: flex;
			overflow: hidden;
			img {
				width: 32%;
				margin-right: 2%;
			}
		}
	
		.aricle_bottom {
			display: flex;
			height: 40px;
			align-items: center;
			color: #888;
			border-bottom: 1px solid #eee;
			font-size: 14px;
			span {
				margin-right: 20px;
			}
		}
	}
</style>
